<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  unref,
  watchEffect,
} from "vue";
import { Search } from "@element-plus/icons-vue";
import {getDownloadFile} from '../../../api/common'
interface props {
  type?: Number; // 1 执行记录 2 采集对象
  title?: String; // 弹窗标题
  tableColumn?: any[]; // 表格标题
  tableDataList?: any[]; // 表格数据
  sizeWidth?: Number | String; // 抽屉宽度
  tableTotal?: Number | String; // 表格总页数
  tablePage?: Number | String; // 当页页码
  tableSize?: Number | String; // 一页显示条数
}
const {
  title = "执行记录",
  tableColumn = [],
  tableDataList = [],
  sizeWidth = "small",
  type = 1,
  tableTotal = 0,
  tablePage = 1,
  tableSize = 20,
} = defineProps<props>();
const emit = defineEmits(["onSearch", "sizeChangeOne", "currentChangeOne"]);
/**
 * @description 抽屉相关
 */
const drawerProps = reactive({
  showDrawer: false,
  title: unref(title),
  size: unref(sizeWidth),
  total: unref(tableTotal)
});

watchEffect(() => {
  drawerProps.title = unref(title);
  drawerProps.size = unref(sizeWidth);
  drawerProps.total = unref(tableTotal)
});

/**
 * @description 搜索条件
 */
const recordSearch = ref("");
watch(recordSearch, () => {
  if (!drawerProps.showDrawer) return;
  emit("onSearch", recordSearch.value);
});
/**
 * @description: 页面容量切换
 */
const sizeChange = function (e) {
  emit("sizeChangeOne", e);
};
/**
 * @description: 分页切换
 */
const currentChange = function (e) {
  emit("currentChangeOne", e);
};
const handleCloseDrawer = async (done) => {
  drawerProps.showDrawer = false;
  recordSearch.value = "";
  done();
};
/**
 * @description 弹窗开关
 */
const openDailog = () => {
  drawerProps.showDrawer = true;
};
defineExpose({ openDailog, tablePage, tableSize });

/**
 * @description 按钮点击
 */
 const tableBtnClick = (btn, row) => {
  const { eventName } = btn;
  if(eventName == 'down') { // 文件下载
    getDownloadFile("scanReport" + row.id + ".html")
  }
 }
 const initData = (e) => {
  emit("currentChangeOne", e.pageIndex);
 }
</script>
<template>
  <div class="record-table">
    <YaDrawerTable v-if="drawerProps.showDrawer" :drawerProps="drawerProps" :column="tableColumn" :data="tableDataList" :showConfirm="false"  @btnClick="tableBtnClick" @init="initData">
      <template #top>
        <el-input
          class="search"
          v-if="type == 2"
          v-model="recordSearch"
          placeholder="请输入IP、域名或URL"
          :prefix-icon="Search"
          clearable
        />
      </template>
    </YaDrawerTable>
  </div>
</template>
<style lang="scss" scoped>
.record-table {
  ::v-deep .ya-layout-content-container {
    height: auto;
  }
  ::v-deep .ya-layout-content-table {
    padding: 0;
  }
  ::v-deep .ya-layout-content-table {
    margin-top: 0;
  }
  .search {
    margin-bottom: 16px;
  }
}
::v-deep .ya-split-panel-container {
  background-color: #fff !important;
}
::v-deep .ya-content {
  padding: 0 !important;
}
.img2 {
  position: relative;
  top: 5px;
  cursor: pointer;
}
</style>
